<template>
  <!-- 出院打印 -->
  <div class="dischargePrint_wrap">
    <!-- {{dischargePatient}} -->
    <!-- 标题 -->
    <div class="docCon_title dischargePrint_title">
      <h2>
        <router-link to="/DischargeManagement">
          <span>出院管理</span>
        </router-link>
      </h2>
    </div>
    <!-- 内容 -->
    <div class="docCon_main">
      <!-- 一, 病人信息 -->
      <div class="dischargeInfo">
        <div class="dischargeInfo_item fl">
          <div>
            姓名：
            <span>{{dischargePatInfo.disP_name}}</span>
          </div>
          <div>
            住院号：
            <span>{{dischargePatInfo.disP_hospNum}}</span>
          </div>
        </div>
        <div class="dischargeInfo_item fl">
          <div>
            性别：
            <span>{{dischargePatInfo.disP_gender}}</span>
          </div>
          <div>
            病床号：
            <span>{{dischargePatInfo.disP_hosBedNum}}</span>
          </div>
        </div>
        <div class="dischargeInfo_item fl">
          <div>
            年龄：
            <span>{{dischargePatInfo.disP_age}}</span>
          </div>
          <div>
            主治医生：
            <span>{{dischargePatInfo.disP_doctor}}</span>
          </div>
        </div>
        <div class="dischargeInfo_item fl">
          <div>
            科室：
            <span>{{dischargePatInfo.disP_section}}</span>
          </div>
          <div>
            护士：
            <span>{{dischargePatInfo.disP_nurse}}</span>
          </div>
        </div>
        <div class="dischargeInfo_item fl">
          <div>
            住院时间：
            <span>{{dischargePatInfo.disP_hospTime}}</span>
          </div>
        </div>
        <div class="dischargeInfo_item fr">
          <div class="dischargeInfo_printBtn fr" @click="printDischarge">
            <i class="fa fa-pencil-square-o"></i>&nbsp;打印证明
          </div>
        </div>
      </div>
      <!-- 二, 主要事项 -->
      <div class="dischargeCon">
        <ul class="dischargeCon_list">
          <li>
            诊断症状：
            <span>{{dischargePatInfo.disP_diagnose}}</span>
          </li>
          <li>
            手术：
            <span>{{dischargePatInfo.disP_operation}}</span>
          </li>
          <li>
            恢复情况：
            <span>{{dischargePatInfo.disP_recovery}}</span>
          </li>
          <li>
            备注：
            <span>{{dischargePatInfo.disP_remark}}</span>
          </li>
        </ul>
      </div>
      <!-- 三, 出院时间 -->
      <div class="dischargeFoot">
        <div class="dischargeFoot_time fl">
          出院时间：
          <span>{{dischargePatInfo.disP_leaveTime}}</span>
        </div>
        <div class="dischargeFoot_doctor fl">
          核准医生：
          <span>{{dischargePatInfo.disP_approvedDoc}}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "HospitalizationManagement",
  data() {
    return {
      dischargePatient: this.$route.query.dischargePat, // 获取上一界面传入的值
      dischargePatInfo: {
        disP_id: "001",
        disP_name: "张三",
        disP_gender: "男",
        disP_age: "49",
        disP_section: "骨科",
        disP_hospTime: "2018-12-4",
        disP_hospNum: "333999888",
        disP_hosBedNum: "2407",
        disP_doctor: "张医生",
        disP_nurse: "王护士",
        disP_diagnose: "右手小臂骨折",
        disP_operation: "钢板固定",
        disP_recovery: "恢复良好",
        disP_remark: "",
        disP_leaveTime: "2018-12-31",
        disP_approvedDoc: "王医生"
      }
    };
  },
  methods: {
    // 打印
    printDischarge: function() {
      // 				// 原来的页面
      // 				let oldHTML = window.document.body.innerHTML;
      // 				// 需要隐藏的元素
      // 				let printBtn = document.getElementsByClassName("dischargeInfo_printBtn")[0];
      // 				let docAside = document.getElementsByClassName("doc_aside")[0];
      // 				let dischargePrintTitle = document.getElementsByClassName("dischargePrint_title")[0];
      // 				let docConFoot = document.getElementsByClassName("doc_con_foot")[0];
      //
      // 				// 隐藏
      // 				printBtn.classList.add("printHidden");
      // 				docAside.classList.add("printHidden");
      // 				dischargePrintTitle.classList.add("printHidden");
      // 				docConFoot.classList.add("printHidden");
      // 				// 需要打印的元素
      // 				// let printHTML = document.getElementsByClassName("docCon_main")[0];
      // 				// console.log(printHTML);
      // 				// 重置HTML
      // 				// window.document.body.innerHTML = printHTML;
      // 				// 打印
      // 				window.print();
      //
      // 				// 恢复原来页面元素
      // 				// window.document.body.innerHTML = oldHTML;
      // 				// 点击取消打印后刷新页面，恢复点击打印按钮之前的原始数据
      // 				window.location.reload();

      /**
       * 局部打印
       */
      // 一, 要打印的内容
      let prinHTML = document.getElementsByClassName("docCon_main")[0];
      // 二, 内容替换
      // 原来body中的内容备份
      let oldHTML = window.document.body.innerHTML;
      // 再次获取页面内容
      let newHTML = window.document.documentElement;
      // 获取body, 准备进行替换
      let newBody = newHTML.getElementsByTagName("body")[0];
      // 替换body中的内容为要打印的内容
      newBody.innerHTML = prinHTML.innerHTML;
      // 需要隐藏的元素
      let printBtn = document.getElementsByClassName(
        "dischargeInfo_printBtn"
      )[0];
      // 隐藏
      printBtn.classList.add("printHidden");

      // 打印
      window.print();
      // 重置html页面
      window.document.body.innerHTML = oldHTML;
      // 刷新页面
      window.location.reload();
    }
  }
};
</script>
<style scoped>
/* 要隐藏元素 */
.printHidden {
  display: none;
}

/* 外部控制元素 */
.dischargePrint_wrap {
  height: 100%;
}
/* 出院管理 */
.dischargePrint_title a {
  padding-top: 12px;
  color: white;
}
.dischargePrint_title a:hover {
  color: #333;
}

/* 一,  */
.dischargeInfo {
  height: 19%;
  border-bottom: 1px solid #707070;
}
.dischargeInfo_item {
  width: 16.5%;
  height: 100%;
  /* 字体 */
  font-size: 14px;
  color: #626262;
}
.dischargeInfo_item div {
  height: 30%;
  padding-top: 20px;
}
.dischargeInfo_item div span {
  color: #333333;
}
/* 打印按钮 */
.dischargeInfo_item .dischargeInfo_printBtn {
  width: 90%;
  height: 26px;
  padding: 0;
  margin-top: 30px;
  border: 1px solid #16dcb8;
  border-radius: 50px;
  background: #16dcb8;
  color: white;
  text-align: center;
  line-height: 26px;
  cursor: pointer;
}
.dischargeInfo_printBtn:hover {
  background: white;
  color: #16dcb8;
}

/* 二,  */
.dischargeCon {
  height: 70%;
  border-bottom: 1px solid #707070;
}
.dischargeCon_list {
  height: 100%;
  color: #626262;
  font-size: 14px;
}
.dischargeCon_list li {
  height: 19%;
  padding-top: 20px;
}
.dischargeCon_list li span {
  color: #333333;
}

/* 三,  */
.dischargeFoot {
  height: 10%;
  font-size: 14px;
  color: #626262;
}
.dischargeFoot > div {
  margin-top: 15px;
  width: 30%;
}
.dischargeFoot > div span {
  color: #333333;
}
</style>